<template>
  <el-container class="box">
    <!--头部区域-->
    <el-header class="header">
    <div class="imt">
      <a href="#"><img src="../assets/img/heima.png" alt=""><span>黑码传智后台</span></a>
    </div>
    <el-button type="info" v-on:click="exit()" class="exit">退出登录</el-button>
  </el-header>
  <el-container class="contiem">
    <!--侧边栏-->
      <el-aside :width="this.blo ?56+'px':200+'px'" class="sidebar">
        <el-row>
          <el-col>
        <div class="toggle-button" v-on:click="toggle()" :style="blo ?'transform:rotate(0deg)':'t:rotate(90degransform)'">|||</div>
        <el-menu :default-active="fiexd"
          class="el-menu-vertical-demo vertical"  v-bind:collapse-transition="false" :collapse="blo"
                     background-color="#333744"  active-text-color="rgb(255, 208, 75)" :unique-opened="isque"
                     text-color="#fff" router><!--开启路由-->
          <!--一级菜单栏 :index 为路由开启后-->  
              <el-submenu :index="item.id+''" v-for="item in date" :key="item.id"> <!---->
                <template slot="title">
                  <i class="el-icon-goods"></i>
                  <span>{{item.authName}}</span>
                </template>
                <!--二级级菜单栏得加上 /-->
                <el-menu-item :index="'/'+val.path" v-for="val in item.children" :key="val.id" v-on:click="SeletRou('/'+val.path)">
                  <i class="el-icon-menu"></i>
                  <span>{{val.authName}}</span>
                </el-menu-item>
              </el-submenu>
        </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <!--管理数据区 子路由-->
      <el-main class="content">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
    export default {
      created:function(){
        this.init();
        this.SeletRou(window.sessionStorage.getItem('Loter'));
      },
      name: "users",
      data: function () {
        return {
          date:[],//侧边栏数据
          blo:false, //侧边闭合
          isque:true,//只能打开一个二级边栏
          fiexd:'',  //激活的路由颜色
          att:['']
        }
      },
      methods: {
        //退出功能
        exit: function () {
          window.sessionStorage.clear();
          this.$router.push('/login');
        },
        //初始化功能(ajax请求列表数据)
        init:async function(){
          let {data : res} = await this.$http.get('menus');
          if(!res.meta.status==='200'){ this.$message.errors('请求失败'); return}
          this.date = res.data;
        },
        //展现拉出
        toggle:function(){
          this.blo = this.blo?false:true;
        },
        //路由选择
        SeletRou:function(router){
          if(router==null){ router='/users'};
          window.sessionStorage.setItem('Loter',router);
          this.fiexd = router;
        }
      },
      meunted:function(){
        console.log('没');
      }
    }
</script>

<style lang="less" scoped>
  .box{
    height: 100%;
  }
  .header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color: #373d41;
    .imt a{
      display: flex;
      color: #eaedf1;
      font-size: 20px;
      align-items: center;
      span{
        padding-left: 10px;
        text-shadow: 4px 4px 10px saddlebrown;
      }
    }
  }
  .contiem{
    display: flex;
    align-items: stretch;
    .el-menu-item{
      margin-left: -3px;
    }
  }
  .sidebar{
    height: 100%;
    background-color: #333744;
  }
  .content{
    background-color: #eaedf1;
  }
  .toggle-button{
    transition:.6s all;
    height: 30px;
    line-height: 30px;
    text-align: center;
    transform: rotate(90deg);
  }
</style>
